<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="DataList Formatting" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID"
        CssClass="DataWebControlStyle" ItemDataBoundEvent="onItemDataBound">
       <AlternatingItemStyle CssClass="AlternatingRowStyle" />
       <ItemStyle CssClass="RowStyle" />
       <HeaderStyle CssClass="HeaderStyle" />
       <FooterStyle CssClass="FooterStyle" />
       <HeaderTemplate><h3>Product Information</h3></HeaderTemplate>
        <ItemTemplate>
            <h4>
                <span id="spnProductName"></span>
            </h4>
            <table border="0">
                <tr>
                    <td class="ProductPropertyLabel">Category:</td>
                    <td><span id="spnCategory"></span></td>
                    <td class="ProductPropertyLabel">Supplier:</td>
                    <td><span id="spnSupplier"></span></td>
                </tr>
                <tr>
                    <td class="ProductPropertyLabel">Qty/Unit:</td>
                    <td><span id="spnQuantityPerUnit"></span></td>
                    <td class="ProductPropertyLabel">Price:</td>
                    <td><span id="spnUnitPrice"></span></td>
                </tr>
            </table>
        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
    </AjaxData:DataList>
    <script type="text/javascript">

        function pageLoad(sender, e)
        {
            DataService.GetProductList(0, 1000, '', '', onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            var dataList = DataList1;

            dataList.set_dataSource(result.Rows);
            dataList.dataBind();
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var product = item.get_dataItem();

                var spnProductName = item.findControl('spnProductName');
                var spnCategory = item.findControl('spnCategory');
                var spnSupplier =  item.findControl('spnSupplier');
                var spnQuantityPerUnit = item.findControl('spnQuantityPerUnit');
                var spnUnitPrice = item.findControl('spnUnitPrice');

                setText(spnProductName, product.Name);
                setText(spnCategory, product.CategoryName);
                setText(spnSupplier, product.SupplierName);
                setText(spnQuantityPerUnit, product.QuantityPerUnit);
                setText(spnUnitPrice, product.UnitPrice.localeFormat('C'));

                if (product.UnitPrice < 20)
                {
                    spnProductName.className = "AffordablePriceEmphasis";
                    spnUnitPrice.className = "AffordablePriceEmphasis";
                }
            }
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>